/* 主页index.html的样式表 */
.top-bar-wrapper{
    width: 100%;
    height: 40px;
    background-color: #333;
    line-height: 40px;
    text-align: center;
}
.line{
    color: #424242;
    font-size: 12px;
    margin: 0 3.6px;
}
a{
    text-decoration: none;
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
     color: #333;
}
li{
    margin:0 2px
}
.topbar{
 
   height: 40px;
}
.topbar a{
    font-size: 12px;
    color: #B0B0B0;
    text-decoration: none;
}
.topbar a:hover{
    color: #fff;
}

.service{
    float: left;

    position: relative;
}

.service li{
    float: left;
}


.shopping{
    width: 120px;
    height: 40px;
    
    float: right;

    background-color: #424242;

    margin-left: 18px;

    position: relative;
}
.shopping:hover{
    width: 120px;
    height: 40px;
    
    float: right;

    color: #ff6700;

    background-color: #fff;

    margin-left: 18px;

    position: relative;

}
.shopping:hover .shopping_list{
    display: block;

    height: 99px;

    z-index: 1;

}
.shopping:hover a{


    color: #ff6700;

    background-color: #fff;


}
.shopping_list{

    /* 隐藏下拉框 */
    /* display: none; */
    z-index: 1;
    width: 316px;
    height: 0;
    background-color:#fff;

    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);

    position: absolute;
    right: 0px;
    /* 为样式设置过渡效果 */
    transition: height 0.3s;
    
}

.user-info{
    float: right;
    
}

.user-info li{
    float: left;
    padding: 0 2px;

}
.Qcode_a{
    position: relative;
}
.Qcode{
    /* display: none; */
    width: 124px;
    height: 0;
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    background-color: #fff;
    position: absolute;
    text-align: center;
    z-index: 1;
    left: -36px;
    
    transition: height 0.3s;

    /* 在动画效果中把溢出内容隐藏起来 */
    overflow:hidden

    
}
.Qcode img{
    position: relative;
    top:20px;


}
 .Qcode_a i{
     display: none;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 18px;
    font-size: 18px;

    z-index: 1;
}
.MIapp{
    display: block;
    color:#000;
    font-size: 14px;

    position: absolute;
    top: 115px;
    left: 20px;

  

}
/* 点击时二维码的持续显示 */
.Qcode_li:hover .Qcode{
    display: block;
    height: 146px;
  
    z-index: 1;

    
}

/* 点击时小三角的显示 */
.Qcode_li:hover i{
    display: block;
    
}

.header_wrapper{
    width: 100%;


   /*加了w属性的头部导航条  */
}
.header{
    height: 100px;
  
}
   
/* 设置logo h1的样式 */
.header .logo{
 float: left;

margin-top: 22px;
width: 55px;
height: 55px;
position: relative;
/* 裁掉溢出的内容home图标 */
overflow: hidden;
/* 隐藏logo中的文字 */
text-indent: -999px;

}
/* 统一设置logo的超链接 */
.logo a{
    /* 因为a是行内元素 */
    position: absolute;
    background-color: #FF6700;
    width: 55px;
    height: 55px;
    left: 0;
    background-image: url(../img/mi-logo.png);
    /* 让logo居中 */
    background-position: center;

    transition: 0.3s;

}
/* logo中的home图标 */
.logo .home{

    left: -55px;
    background-image: url(../img/mi-home.png);
}
/* logo鼠标移入后的过渡动画 */
.logo:hover .mi{
    left: 55px;

}
.logo:hover .home{
    left: 0px;

}
.header_wrapper{
 
    position: relative;
}
/* 设置中间的导航条 */
.header .nav_wrapper{
    float: left;
}
/* 设置导航条 */
.header .nav{
    width: 785px;
    height: 100px;
    
    line-height: 100px;
    /* 加了padding，要减去原来宽度 */
    padding-left: 65px;
}
/* 只让头部导航条的li浮动，不影响后面的 */
.nav > li{
    float: left;
}
 
/* 设置左侧导航条的样式 */

.allgood_wrapper{
  
  position: relative;
}
.left-menu{
  width: 234px;
  height: 420px;
  background-color: rgba(0, 0, 0, .6);
  position: absolute;
  z-index: 10;
  left: -122px;

  line-height: 1;

  padding: 20px 0;

}
.left-menu li a:hover{
  color: white;
  
  background-color: #ff6700;
}
.left-menu li a{
  display: block;
  height: 42px;
  line-height: 42px;
  color: white;
font-size: 14px;
padding:  0 30px;


}
/* 设置小三角 */
.left-menu li a i{
  float: right;
  line-height: 42px;
  font-size: 20px;
}






.nav > li >  a{
    display: block;
    height: 100px;
    line-height: 100px;
    font-size: 16px;
    margin-right: 20px;
}
.nav > li > a:hover{
    color: #FF6700;
}
      
/* 隐藏全部商品 */
.allgoods{
    visibility: hidden;
}
.nav .showgood:hover ~ .good_info,
.good_info:hover{
  
    background-color: white;
    height: 228px;
    
    border-top: solid 1px rgb(224, 224, 224);
                /* 设置阴影 
    /阴影偏移量 上 左右 下  */
    box-shadow: 0 5px 3px rgba(0, 0, 0, .2); 

    z-index: 20;
}
.good_info{
    /* 不设置displaynone是为了有动作 */
    height: 0;
   overflow: hidden;
    width: 100%;
   
    /* 注掉是为了删去阴影 */
/*             
    border-top: solid 1px rgb(224, 224, 224);
                设置阴影 
    /阴影偏移量 上 左右 下 
    box-shadow: 0 5px 3px rgba(0, 0, 0, .2); */
    position: absolute;
    top: 100px;

    left: 0;
    /* 动画效果 */
    transition: height 0.3s;
    z-index: 1;

}

.search-wrapper{
    height: 50px;
    
    width: 296px;
    float: left;
    background-color: red;
    margin-top: 20px;

    
}
.search-wrapper .search-inp{
    box-sizing: border-box;
    float: left;
    width: 244px;
    height: 50px;
  
    border: 0;
    font-size: 16px;
    /* 为了使输入的字位置好一点，所以加个padding */
    padding: 0 10px;
    border: 1px solid rgb(224, 224, 224);
       /* 去掉原生的轮廓线 */
       outline: none;
}
.search-wrapper .search-btn{
    float: left;
    height: 50px;
    width: 52px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #616161;
    font-size: 16px;

    border: 1px solid rgb(224, 224, 224);
    /* 去掉原生的轮廓线 */
    outline: none;
    border-left: none;

}
/* 设置点击的时候搜索框变化 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus + button{
    border-color:#ff6700;

}
.search-wrapper .search-btn:hover{
    background-color: #ff6700;
    color: white;
    border:none;

}
/* 设置轮播图 */
.banner{
    position: relative;
    height: 460px;
    width: 1226px;
}
.banner .img-list li{
   /* 让li脱离文档流 */
   position: absolute;
}
.banner img{
   width: 100%;
   /* 消除图片与图片之间的线 间隔 
   即去除图片边距
   */
   vertical-align: top;
}
/* 设置五个导航点 */
.pointer{
   position: absolute;

   bottom: 22px;
   right: 35px;
}
.pointer a{
    display: block;

   float: left;
   width: 6px;
   height: 6px;
   border: 2px rgba(255, 255, 255, .4) solid;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, .4);

   margin-left: 6px;


}
.pointer a:hover,
.pointer a.active{
border: 2px rgba(0, 0, 0, .4) solid;
background-color: rgba(255, 255, 255, .4);
}
.prev-next a{
   display: block;
   width: 41px;
   height: 69px;
   
   position: absolute;
   /* 下面三行是为了水平居中 */
   top: 0;
   bottom: 0;
   margin: auto 0;

   background-image: url(./img/icon-slides.png);
}
.prev-next .prev{
   left: 234px;

   background-position:-83px  0;
}
.prev-next .next{
  right: 0;

  background-position: -123px 0;
}
.prev:hover{
   background-position: 0 0;
}
.next:hover{
   background-position: 123px 0;
}
/* s设置回到顶部的工具栏 */
.toolwrapper{
   width: 26px;
   height: 206px;
   background-color: white;
   border: solid 1px #B0B0B0;
   /* 开启固定定位 */
   position: fixed;

   bottom: 80px;

   /* 
   布局的等式
    left+margin-l+width——margin-r+right+视口的宽度
   */
   right: 50%;
   /* 整个视口的50%
   auto+0+20+0+50%=窗口宽度

   此时调整margin-right即可调整left
   不可通过margin-left来调整，因为left和它会互补，无效果
   */
   margin-right: -636px;
}
.ad{
   height: 170px;
   margin-top: 14px;
}
.shortcut,
.ad-img,
.ad li{
   float: left;
}
/* 设置左侧 */
.shortcut{
width: 228px;
height: 168px;
padding-top: 2px;
/* 显示上边框 */
padding-left: 6px;
/* 显示左边框 */
background-color: #5f5750;
margin-right: 10px;


}

.shortcut a{
height: 85px;
width: 72px;
display: block;
color: #cfccaa;
text-align: center;
font-size: 10px;
/* 开启BFC，防止外边距折叠 */
overflow: hidden;
}
.shortcut a i{
font-size: 18px;
display: block;
text-align: center;
margin-top: 20px;

margin-bottom: 5px;
}
.shortcut a:hover{
color: white;
}

.shortcut li{
position: relative;
}
/* 设置上边框 */
.shortcut li::before{
content: '';
position: absolute;
width: 64px;
height: 1px;
background-color: #665e57;
left: 0;
right: 0;
margin: 0 auto;
top: 0;

}
/* 设置左边框 */
.shortcut li::after{
content: '';
position: absolute;
width: 1px;
height: 70px;
background-color: #665e57;
left: 0;
right: 0;

top: 0;
bottom: 0;
/* 水平居中 */
margin: auto 0;

}
.ad-img li{
width: 316px;
margin-right: 15px;
}
.ad-img li:last-child{
margin: 0;
}
.ad-img img{
width: 100%;
vertical-align: top;
}
